package com.frxuexi.mdm2205.demo

import android.util.Log
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.AccountCircle
import androidx.compose.material3.FilledTonalButton
import androidx.compose.material3.Icon
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import coil.compose.AsyncImage
import com.frxuexi.mdm2205.R

@Preview
@Composable
fun Demo01() {
    var name by remember {
        mutableStateOf("")
    }

    var pass by remember {
        mutableStateOf("")
    }

    //Column：垂直布局
    //Row：水平布局
    //fillMaxWidth()最大宽度
    //Arrangement.spacedBy(10.dp)：子组件之间的间距
    //SpaceEvenly……布局上均分
    Column(modifier = Modifier.fillMaxSize().padding(20.dp)/*, verticalArrangement = Arrangement.Center*/) {
        Text(/*modifier = Modifier.width(40.dp),*/
            text = "Hello $name!",
            color = colorResource(id = R.color.purple_200),
            fontSize = 22.sp,
            fontWeight = FontWeight.Bold,
            letterSpacing = 3.sp,
            textAlign = TextAlign.Center,
//            maxLines = 1,
            overflow = TextOverflow.Ellipsis
        )
        Spacer(modifier = Modifier.height(10.dp))
//        Spacer(modifier = Modifier.width(10.dp))
        Text(text = "Hello aa")
        Text(text = "Hello aa")
        TextField(
            value = name,
            onValueChange = {
                name = it
            },
            label = { Text(text = "用户名") },
            leadingIcon = {
                Icon(
                    imageVector = Icons.Default.AccountCircle,
                    contentDescription = ""
                )
            },//左侧图标
            trailingIcon = {
                Icon(
                    painter = painterResource(id = R.drawable.ic_action_eye),
                    contentDescription = ""
                )
            },//右侧图标/按钮
            visualTransformation = PasswordVisualTransformation(),//密文
            shape = RoundedCornerShape(20.dp),
        )
        OutlinedTextField(
            value = pass, onValueChange = { pass = it }, label = { Text(text = "用户名") },
            leadingIcon = {
                Icon(
                    imageVector = Icons.Default.AccountCircle,
                    contentDescription = ""
                )
            },//左侧图标
            trailingIcon = {
                Icon(
                    painter = painterResource(id = R.drawable.ic_action_eye),
                    contentDescription = ""
                )
            },//右侧图标/按钮
            visualTransformation = PasswordVisualTransformation(),//密文
            shape = RoundedCornerShape(20.dp),
        )

        FilledTonalButton(
            modifier = Modifier.size(100.dp),
            onClick = { Log.i("===", "登录点击了") },
//            shape = RoundedCornerShape(10.dp,20.dp,30.dp,40.dp)
            shape = CircleShape
        ) {
            Text(text = "登录")
        }

        //containerColor:背景颜色，contentColor：文字颜色
        /*Button(
            onClick = { *//*TODO*//* },
            colors = ButtonDefaults.buttonColors(
                containerColor = Color.Red,
                contentColor = Color.Yellow
            )
        ) {
            Text(text = "登录")
        }

        OutlinedButton(onClick = { *//*TODO*//* }) {
            Text(text = "登录")
        }

        ElevatedButton(onClick = { *//*TODO*//* }) {
            Text(text = "登录")
        }

        TextButton(onClick = { *//*TODO*//* }) {
            Text(text = "登录")
        }

        Image(imageVector = Icons.Default.AccountCircle, contentDescription = "")
        Image(
            painter = painterResource(id = R.drawable.ic_launcher_background),
            contentDescription = "",
            alpha = 0.3f,
        )*/

        AsyncImage(
            model = "https://img1.baidu.com/it/u=4214113141,2036563917&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1729098000&t=0662d2b383091882ccdd43ad060de2a7",
            contentDescription = "",
            contentScale = ContentScale.Crop,
            modifier = Modifier
                .width(100.dp)
                .height(100.dp)
                .clip(
                    RoundedCornerShape(20.dp)
                )
        )

    }

    /*Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.Center) {
        Text(text = "Hello $name!")
//        Spacer(modifier = Modifier.width(10.dp))
        Text(text = "Hello aa")
        Text(text = "Hello aa")
    }*/

}